<!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>接口操作日志</title> 
    <link rel="shortcut icon" href="favicon.ico">
	<#import "/common/import.ftl" as import>
    <@import.tableManagerImportCss/>
    <style>
    	.demo:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "条件查询：";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.demo {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		}
		.search{
		    width:300px;
		}
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <!-- Panel Other -->
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>接口操作日志</h5>
                <div class="ibox-tools">
                </div>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">  
                    <div class="col-sm-12">
                        <!-- Example Events -->
                        <div class="example-wrap"> 
                            <div class="example"> 
						        <div style="" class="demo ui-sortable">
                            		 <div class="row">
                            		 	<div class="col-sm-3">
			                                <div class="form-group">
			                                    <label>上传机构KEY：</label>
			                                    <input name="mykey" id="mykey"   type="text"  class="form-control" placeholder="请输入密钥KEY">
			                                </div> 
			                            </div>
			                            <div class="col-sm-3">
			                                <div class="form-group">
			                                    <label>车牌号码：</label>
			                                    <input name="hphm" id="hphm"   type="text"  class="form-control" placeholder="请输入车牌号码">
			                                </div>
			                            </div>
			                           	<div class="col-sm-3">
			                                <div class="form-group">
			                                    <label>状态：</label>
			                                    <select data-placeholder="请选择状态" id="status" name="status"  class="chosen-select form-control">
						                                  <option  value="" hassubinfo="true" ></option>
						                                  <option value="success" hassubinfo="true">成功</option>
														  <option value="fail" hassubinfo="true">失败</option>
										        </select>
			                                </div> 
			                            </div>
			                            <div class="col-sm-3" style="padding-top: 22px;">
			                                 <button type="button" class="btn btn-primary" id="search">查询</button>
			                            </div> 
			                        </div>
			                    </div>                    
                                <table id="exampleTableEvents" data-mobile-responsive="true" >
                                    <thead>
                                        <tr>
                                            <th data-field="id" data-visible = "false" >id</th>  
								            <th data-field="portsName">访问接口名称</th> 
								            <th data-field="portsUrl" data-visible = "false">接口调用入口</th>
								            <th data-field="uploadCode" data-formatter="formatString">检测编号/外检单号</th>
								            <th data-field="jcjgbm" data-formatter="formatString">上传检测机构编号</th>
								            <th data-field="hphm" data-formatter="formatString">号牌号码</th>
								            <th data-field="scjgid"  data-visible = "false" data-formatter="formatString">上传数据机构ID</th>
								            <th data-field="cjh" data-formatter="formatString">车架号</th>
								            <th data-field="exceptionInfo" data-formatter="formatString">异常信息</th>
								            <th data-field="mykey" data-formatter="formatString">上传机构KEY</th>
								            <th data-field="uptype" data-formatter="formatType">上传机构类型</th>
								            <th data-field="status" data-formatter="formatStatus">状态</th>
								            <th data-field="cjsj" data-formatter="formatTime">创建时间</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <!-- End Example Events -->
                    </div>
                </div>
            </div>
        </div>
        <!-- End Panel Other -->
    </div>
    
    <div id="win_add"></div>
	<div id="win_edit"></div>
	<div id="win_set"></div>
    <@import.tableManagerImportScript/>
    <script src="${WEB_PATH}/resources/js/plugins/jsTree/jstree.min.js"></script>
    <script src="${WEB_PATH }/resources/js/plugins/fancybox/jquery.fancybox.js"></script>
    <script src="${WEB_PATH}/resources/js/qcity-picker.data.js"></script>
	<script src="${WEB_PATH}/resources/js/city-picker.js"></script>
    <script >
    	$(function(){
    		$("#status").chosen({width:'100%'});
    		function queryParams(params) {
		        var temp = {  
			        limit: params.limit,  
			        offset: params.offset,  
			        search:params.search,
			        mykey:$("#mykey").val(),
			        hphm:$("#hphm").val(),
			        status:$("#status").val(),
			        maxrows: params.limit,
			        pageindex:params.pageNumber,
		        };
		        return temp;
			}
    		//加载table数据
	    	$("#exampleTableEvents").bootstrapTable({
	            url: "${WEB_PATH }/system/log/getPage.do",
	            method: 'get',
	            search:true,
	            pagination:true,
	            pageNumber:1,  
	            pageSize:15,   
	            showRefresh:true, 
	            showColumns:true,
	            detailView:true,
	            detailFormatter:detailFormatter,
	            iconSize: "outline",
	            toolbar: "#exampleTableEventsToolbar",
	            sidePagination: "server", //设置为服务器端分页
	            queryParams: queryParams,//参数
	            minimumCountColumns: 1, 
	            search: true,    //隐藏搜索框
	            clickToSelect: true, 
	        });
	        $('input.form-control.input-outline').attr("placeholder","名称/编号检索"); //设置搜索提示信息
	        
	        function detailFormatter(index, row) {
	        	var html = "<div class='row'><p class='col-md-12' style='text-align: center;'>参数值："+row.parameter+"</p></div>"
			    return html;
			}
		});
		
		 //点击查询搜索
		$("#search").click(function(){
			$("#exampleTableEvents").bootstrapTable('refresh');
		});
		
		function formatString(val){
		 	if(null == val || "" == val){
		 		return "<font color='red'>无</font>";
		 	}
		 	return val;
		}
		
		function formatStatus(val){
		 	if(val == "success"){
				return '<span class="label label-success">成功</span>';
			}else if(val == "fail"){
				return '<span class="label label-danger">失败 </span>';
			} 
			return "<font color='red'>无</font>";
		}
		
		function formatType(val){
		 	if(val == "hbj"){
				return '<span class="label label-primary">环保局</span>';
			}else if(val == "jcz"){
				return '<span class="label label-success">检查站 </span>';
			} 
			return "<font color='red'>无</font>";
		}
		
        function formatTime(val){
		 	var tt=new Date(val).toLocaleString(); 
    		return tt; 
		}
    </script>
</body>

</html>